<template>
  <div>
    <!-- 顶部搜索框 -->
    <div class="TopSearch">
      <div>
        <el-input
          style="width: 250px;"
          placeholder="输入比赛or立项等等进行搜索"
          prefix-icon="el-icon-search"
          v-model="query.name"
        >
        </el-input>
        <el-input
          style="width: 250px;"
          placeholder="输入成员名进行搜索"
          prefix-icon="el-icon-search"
          v-model="query.stuName"
        >
        </el-input>
        <el-button size="el-icon-plus" type="primary" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <div>
        <el-upload
          style="display:inline-flex;"
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :before-upload="beforeUpload"
          :disabled="importDataDisabled"
        >
          <el-button
            :disabled="importDataDisabled"
            type="success"
            :icon="importDataBtnIcon"
            @click="warnUser"
          >
            {{ importDataBtnText }}
          </el-button>
        </el-upload>
        <el-button type="success">
          <i class="fa fa-level-down" @click="exportInfoToWordDoxc">导出数据</i>
        </el-button>
        <el-button type="primary">
          <i class="fa fa-level-down" @click="getImportTemplate">获取导入模板</i>
        </el-button>
      </div>
    </div>

    <!-- 主要内容 -->
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="竞赛奖励" name="competitionPrize">
          <competition-prize-table :query="query" ref="competitionPrize" />
        </el-tab-pane>
        <el-tab-pane label="课题立项" name="projectEstablish">
          <project-establish-table :query="query" ref="projectEstablish" />
        </el-tab-pane>
        <el-tab-pane label="考取证书" name="Certificates">
          <certificates-table :query="query" ref="Certificates" />
        </el-tab-pane>
        <el-tab-pane label="就业考研" name="Achievement">
          <achievement-table :query="query" ref="Achievement" />
        </el-tab-pane>
        <el-tab-pane label="发布论文" name="Papers">
          <papers-table :query="query" ref="Papers" />
        </el-tab-pane>
        <el-tab-pane label="专利或著作权" name="Patent">
          <paten-table :query="query" ref="Patent" />
        </el-tab-pane>
        <el-tab-pane label="注册公司" name="Company">
          <company-table :query="query" ref="Company" />
        </el-tab-pane>
        <el-tab-pane label="创新创业" name="Innovation">
          <innovation-table :query="query" ref="Innovation" />
        </el-tab-pane>
        <el-tab-pane label="培训承包" name="CompetitionTraining"
          ><competition-training-table :query="query" ref="CompetitionTraining" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {downloadRequest} from "@/utils/download";
import CompetitionPrizeTable from "@/views/res0/TableStuInfoComponents/CompetitionPrizeTable";
import ProjectEstablishTable from "@/views/res0/TableStuInfoComponents/ProjectEstablishTable";
import CertificatesTable from "@/views/res0/TableStuInfoComponents/CertificatesTable.vue";
import AchievementTable from "@/views/res0/TableStuInfoComponents/AchievementTable.vue";
import CompanyTable from "@/views/res0/TableStuInfoComponents/CompanyTable.vue";
import InnovationTable from "@/views/res0/TableStuInfoComponents/InnovationTable.vue";
import PapersTable from "@/views/res0/TableStuInfoComponents/PapersTable.vue";
import PatenTable from "@/views/res0/TableStuInfoComponents/PatenTable.vue";
import CompetitionTrainingTable from "@/views/res0/TableStuInfoComponents/CompetitionTrainingTable.vue";
export default {
  name: "StudentInfo",
  components: {
    CompetitionPrizeTable,
    ProjectEstablishTable,
    CertificatesTable,
    AchievementTable,
    CompanyTable,
    InnovationTable,
    PapersTable,
    PatenTable,
    CompetitionTrainingTable,
  },
  data() {
    return {
      activeName: "competitionPrize",
      // 数据列表
      infoList: [],
      time: "",
      // 进行搜索的数据类
      query: {
        stuName: "",
        name: "",
      },
      importDataDisabled: false,
      importDataBtnText: "导入数据",
      importDataBtnIcon: "el-icon-upload2",
      searchType: "",
    };
  },
  methods: {
    // 搜索按钮响应事件
    handleSearch() {
      if (this.activeName === "competitionPrize") {
        this.$refs["competitionPrize"].getCompetitionPrizeData();
      } else if (this.activeName === "projectEstablish") {
        this.$refs["projectEstablish"].getProjectEstablishData();
      } else if (this.activeName === "Certificates") {
        this.$refs["Certificates"].getCompetitionPrizeData();
      } else if (this.activeName === "Achievement") {
        this.$refs["Achievement"].getCompetitionPrizeData();
      } else if (this.activeName === "Papers") {
        this.$refs["Papers"].getCompetitionPrizeData();
      } else if (this.activeName === "Patent") {
        this.$refs["Patent"].getCompetitionPrizeData();
      } else if (this.activeName === "Company") {
        this.$refs["Company"].getCompetitionPrizeData();
      } else if (this.activeName === "Innovation") {
        this.$refs["Innovation"].getCompetitionPrizeData();
      } else if (this.activeName === "CompetitionTraining") {
        this.$refs["CompetitionTraining"].getCompetitionPrizeData();
      }
    },
    // 数据初始化
    initDate() {
      const url = "/studentInfo";
      const params = {
        fileName: this.fileName,
        startTime: this.time[0],
        endTime: this.time[1],
      };
      this.getRequest(url, params).then((resp) => {
        if (resp) {
          this.infoList = resp.obj;
        }
      });
    },
    /**
     * 提醒用户传入的文件版本
     */
    warnUser() {
      this.$message({
        message: '传入的Word文档需是2003版本的，否则会出现错误！',
        duration: 6000,
        type: 'warning'
      });
    },
    /**
     * 上传文件
     */
    beforeUpload(file) {
      
      this.importDataBtnText = "正在导入中";
      this.importDataBtnIcon = "el-icon-loading";
      this.importDataDisabled = true;
      let data = new FormData();
      data.append("file", file);
      this.postRequest("/modifyWord", data).then(resp => {
        this.importDataBtnText = "导入数据";
        this.importDataBtnIcon = "el-icon-upload2";
        this.importDataDisabled = false;
      });
      this.handleSearch();
    },
    /**
     * 下载后端传来的数据
     */
    exportInfoToWordDoxc() {
      downloadRequest("/modifyWord");
    },

    /**
     * 获取导入数据的Word模板
     */
    getImportTemplate() {
      downloadRequest("/modifyWord/template");
    }
  },
  mounted() {},
};
</script>

<style scoped>
.TopSearch {
  display: flex;
  margin-top: 10px;
  justify-content: left;
}
.TopSearch > div > * {
  margin-right: 15px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
